<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Data</title>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
	<script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<style>
	    body {
	        font-family: Arial, sans-serif;
	        line-height: 1.6;
	        padding: 20px;
	    }
	    .input-container {
	        margin-bottom: 15px;
	    }
	    .input-container label {
	        display: block;
	        margin-bottom: 5px;
	    }
	    .input-container input[type="text"] {
	        width: 100%;
	        padding: 8px;
	        font-size: 16px;
	        border: 1px solid #ccc;
	        border-radius: 4px;
	    }
	</style>
	<title>设置背景颜色</title>
	    <style>
	        body {
	            background-color: #fffae8;
	        }
	    </style>
</head>
<body>
    <div id="output"></div>
	<div id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">股票分析系统</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="kline1.html">展示页 </a>
          </li>
		  <li class="nav-item active">
		    <a class="nav-link" href="data.html">数据获取<span class="sr-only">(当前)</span></a>
		  </li>
          <li class="nav-item">
            <a class="nav-link" href="register.html">注册</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="login.html">登录</a>
          </li>
		  
        </ul>
      </div>
    </nav>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <div class="input-container">
            <label for="startDate">开始日期：</label>
            <input type="text" id="startDate" name="startDate">
        </div>
        <div class="input-container">
            <label for="endDate">结束日期：</label>
            <input type="text" id="endDate" name="endDate">
        </div>
        <div class="input-container">
            <label for="gpName">股票名称：</label>
            <input type="text" id="gpName" name="gpName">
        </div>
    
        <button onclick="submitForm()">提交</button>
		<button onclick="exit()">返回</button>
	<script>
	        function submitForm() {
	            // 获取输入框的值
	            const startDateValue = document.getElementById('startDate').value;
	            const endDateValue = document.getElementById('endDate').value;
	            const gpNameValue = document.getElementById('gpName').value;
	
	           
	    const apiUrl = `http://127.0.0.1/getStocks?startDate=${startDateValue}&endDate=${endDateValue}&pageNow=1&gpName=${gpNameValue}`;
        const dates = [];
        const fluctuations = [];
        axios.get(apiUrl)
          .then(response => {
            let jsonarr = response.data;
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';

            jsonarr.forEach((stock, index) => {
                // 创建每个 stockItem 的容器 div
                const stockItem = document.createElement('div');
				const date = stock.date;
				const fluctuation = stock.table_stock_hiPrice - stock.table_stock_lowPrice;
				const fluctuation2 =stock.table_stock_closePrice - stock.table_stock_openPrice;				    
				
                stockItem.textContent = `${stock.date},${stock.table_stock_gpName},当日最低价： ${stock.table_stock_lowPrice},当日最高价：${stock.table_stock_hiPrice},波动范围：${fluctuation},当日收盘/开盘：${fluctuation2}`;
                stockItem.style.border = '1px solid #ccc';
                stockItem.style.padding = '10px';
                stockItem.style.marginBottom = '5px';
                stockItem.style.backgroundColor = '#f9f9f9';
                stockItem.style.fontFamily = 'Arial, sans-serif';
				stockItem.style.fontSize = '10px'; // 例如将字体大小设置为 14 像素
				
				

                // 根据奇偶数给左右两个部分分配
                if (index % 2 === 0) {
                    stockItem.style.float = 'left'; // 左浮动
                    stockItem.style.width = '48%'; // 左部分宽度
                } else {
                    stockItem.style.float = 'right'; // 右浮动
                    stockItem.style.width = '48%'; // 右部分宽度
                }

                // 添加到输出容器 outputDiv
                outputDiv.appendChild(stockItem);

                // 每行两个 stockItem，添加清除浮动
                if ((index + 1) % 2 === 0) {
                    const clearfix = document.createElement('div');
                    clearfix.style.clear = 'both';
                    outputDiv.appendChild(clearfix);
                }
            });
          })
          .catch(error => {
              console.error('Error fetching stock data:', error);
              const outputDiv = document.getElementById('output');
              outputDiv.textContent = 'Failed to fetch stock data.';
          });}
		  function exit(){
			   window.location.href = 'kline1.html';
		  }
    </script>
</body>
</html>
